<!--
 * @Author: 高稀
 * @Date: 2022-05-18 15:11:01
 * @Description: 横幅
-->
<template>
  <div class="banner-section" :style="containerStyle" :class="currentContentClass">
    <div
      :id="'marquee' + sectionData.options.sectionUuids"
      v-if="sectionData.data.marqueeStyle == '1' || sectionData.data.marqueeStyle == '2'"
    >
      <ul>
        <li v-html="sectionData.data.slogan"></li>
      </ul>
    </div>
    <!-- <marquee
      v-if="sectionData.data.marqueeStyle == '1'"
      behavior="scroll"
      direction="left"
      scrollamount="2"
      class="banner-section-text"
      :class="currentTextClass"
      :style="textStyle"
      v-html="sectionData.data.slogan"
    />
    <marquee
      v-else-if="sectionData.data.marqueeStyle == '2'"
      behavior="scroll"
      direction="right"
      scrollamount="2"
      class="banner-section-text"
      :class="currentTextClass"
      :style="textStyle"
      v-html="sectionData.data.slogan"
    /> -->

    <p
      v-else
      class="banner-section-text"
      :class="currentTextClass"
      :style="textStyle"
      v-html="sectionData.data.slogan"
    ></p>
  </div>
</template>

<script>
  // 横幅
  export default {
    name: 'Banner',
    props: {
      sectionData: {
        type: Object,
        default: () => ({})
      },
      contentWidth: { type: Number }
    },
    computed: {
      containerStyle() {
        let style = {
          backgroundImage: `url(${this.sectionData.data.banner || ''})`,
          backgroundRepeat: this.sectionData.data.backgroundRepeat,
          backgroundColor: this.sectionData.data.backgroundColor,
          width: '100%',
          lineHeight: this.sectionData.data.height + 'px',
          height: this.sectionData.data.height + 'px',
          color: this.sectionData.data.fontColor,
          overflow: 'hidden'
        };
        return style;
      },
      textStyle() {
        return {
          textAlign: this.sectionData.data.textAlign,
          color: this.sectionData.data.fontColor
        };
      },
      currentContentClass() {
        let cls = [];
        cls.push('notice_fontSize_' + this.sectionData.data.fontSize);
        return cls;
      },
      currentTextClass() {
        let cls = [];
        cls.push('notice_fontStyle_' + this.sectionData.data.fontStyle);
        return cls;
      }
    },
    mounted() {
      const direction = this.sectionData.data.marqueeStyle == '1' ? 'left' : 'right';
      this._dowebok = $('#marquee' + this.sectionData.options.sectionUuids).liMarquee({
        direction: direction, // 滚动方向
        scrollamount: 100 // 滚动速度
      });
    },
    beforeDestroy() {
      this._dowebok.liMarquee('destroy');
    }
  };
</script>

<style lang="scss" scoped>
  .banner-section {
    .banner-section-text {
      padding: 0 10px;
      margin: 0;
    }
  }

  .notice_fontSize_0 {
    //小号
    font-size: 12px;
  }

  .notice_fontSize_1 {
    font-size: 14px;
  }

  .notice_fontSize_2 {
    //中号
    font-size: 16px;
  }

  .notice_fontSize_3 {
    //较大
    font-size: 18px;
  }

  .notice_fontSize_4 {
    font-size: 24px;
  }

  .notice_fontStyle_0 {
    font-weight: normal;
  }

  .notice_fontStyle_1 {
    font-weight: bold;
  }
</style>
